<template>
    <div class="">
        <div class="big-main-box-right-item" :class="'big-main-box-right-item' + (props.itemData.id - 1)">
            <div>
                <div class="timer-box">
                    <span>{{props.itemData.value}}</span>
                    <span v-if="props.itemData.unit">{{props.itemData.unit}}</span>
                </div>
                <p>{{props.itemData.title}}</p>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    itemData: {
        type: Object,
        default: () => {}
    }
})
</script>
<style lang="scss" scoped>
.big-main-box-right-item {
    width: 12rem;
    height: 14rem;
    background: url("@/assets/image/icon1.png") center no-repeat;
    background-size: 100% auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;

    .timer-box {
        text-align: center;
        line-height: 1;

        span:nth-child(1) {
            font-size: 2.2rem;
        }

        span:nth-child(2) {
            margin-left: .25rem;
            font-size: 1.8rem;
        }
    }

    p {
        transform: scale(.8);
        text-align: center;
    }
}


.big-main-box-right-item1 {
    background: url("@/assets/image/icon2.png") center no-repeat;
    background-size: 100% auto;

    .timer-box {

        span {
            color: #5FEAB8;
        }
    }
}

.big-main-box-right-item2 {
    background: url("@/assets/image/icon3.png") center no-repeat;
    background-size: 100% auto;

    .timer-box {

        span {
            color: #EACB5F
        }
    }
}

.big-main-box-right-item3 {
    background: url("@/assets/image/icon4.png") center no-repeat;
    background-size: 100% auto;

    .timer-box {

        span {
            color: #FF8B72
        }
    }
}

.big-main-box-right-item4 {
    background: url("@/assets/image/icon5.png") center no-repeat;
    background-size: 100% auto;

    .timer-box {

        span {
            color: #BE5FEA
        }
    }
}

.big-main-box-right-item5 {
    background: url("@/assets/image/icon6.png") center no-repeat;
    background-size: 100% auto;

    .timer-box {

        span {
            color: #EA5F5F
        }
    }
}
</style>
  